<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        body {
            background: #000;
            text-align: center;
            font: 12px/20px Arial;
        }

        #box {
            position: relative;
            width: 492px;
            height: 172px;
            background: #fff;
            border-radius: 5px;
            border: 8px solid #fff;
            margin: 100px auto;
            cursor: pointer;
        }

        #box .list {
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
        }

        #box .list ul {
            position: absolute;
            top: 0;
            left: 0;
        }

        #box .list li {
            width: 490px;
            height: 170px;
            overflow: hidden;
        }

        #box .count {
            position: absolute;
            right: 0;
            bottom: 5px;
        }

        #box .count li {
            color: #fff;
            float: left;
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-right: 5px;
            overflow: hidden;
            background: #F90;
            opacity: 0.7;
            filter: alpha(opacity=70);
            border-radius: 20px;
        }

        #box .count li.now {
            color: #fff;
            opacity: 1;
            filter: alpha(opacity=100);
            font-weight: 700;
            background: #f60;
        }

        #tmp {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        //获取ID
        var $ = function (id) {
            return typeof id === "string" ? document.getElementById(id) : id
        };
        //获取tagName
        var $$ = function (tagName, parent) {
            return (parent || document).getElementsByTagName(tagName)
        };
        //自动播放对象 initialize 只不过是个变量，代表一个方法，用途是类的构造函数。 
        var autoPlay = function (id) {
            this.initialize(id)
        };
        autoPlay.prototype = {
            initialize: function (id) {
                var that = this;
                this.box = $(id);
                this.ul = $$("ul", this.box)[0];
                this.imgs = $$("img", this.box);
                this.timer = null;
                this.now = 0;
                this.createBtn();
                this.btn = $$("li", this.count);
                this.toggle();
                this.autoTimer = setInterval(function () {
                   that.next();
                }, 2000);
                this.box.onmouseover = function () {
                    clearInterval(that.autoTimer);
                };
                this.box.onmouseout = function () {
                    that.autoTimer = setInterval(function () {
                        that.next();
                    }, 2000)
                };
                for (var i = 0; i < this.btn.length; i++) {
                    this.btn[i].index = i;
                    this.btn[i].onmouseover = function () {
                        this.now = this.index;
                        this.toggle();
                    }

                }

            },
            createBtn: function () {
                this.count = document.createElement("ul");
                //创建一个新的空白的文档片段( DocumentFragment)
                this.frag = document.createDocumentFragment();
                this.count.className = 'count';
                for (var i = 0; i < this.imgs.length; i++) {
                    var lis = document.createElement("li");
                    lis.innerHTML = i + 1;
                    this.frag.appendChild(lis);
                }
                this.count.appendChild(this.frag);
                this.box.appendChild(this.count)
            },
            toggle: function () {
                for (var i = 0; i < this.btn.length; i++) this.btn[i].className = "";
                this.btn[this.now].className = "now";
                this.doMove(-(this.now * this.imgs[0].offsetHeight))
            },
            next: function () {
                this.now++;
                this.now == this.btn.length && (this.now = 0);
                this.toggle()
            },
            doMove: function (target) {
                var that = this;
                clearInterval(that.timer);
                that.timer = setInterval(function () {
                    var speed = (target - that.ul.offsetTop) / 5;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    that.ul.offsetTop == target ? clearInterval(that.timer) : (that.ul.style.top = that
                        .ul.offsetTop + speed + "px")
                }, 30)
            }
        };
        window.onload = function () {
            new autoPlay("box");
        };
    </script>
</head>

<body>
    <div id="box">
        <div class="list">
            <ul>
                <li><img src="img/01.jpg" width="490" height="170" /></li>
                <li><img src="img/02.jpg" width="490" height="170" /></li>
                <li><img src="img/03.jpg" width="490" height="170" /></li>
                <li><img src="img/04.jpg" width="490" height="170" /></li>
                <li><img src="img/05.jpg" width="490" height="170" /></li>
            </ul>
        </div>
    </div>

</body>

</html>